<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-09 09:47:21
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-12-13 13:08:56
 * @Description: 文章管理
 * @FilePath: \tuanfeng-admin-front\src\pages\Bidding\index.vue
-->
<script setup lang="ts">
import moment from "moment";
import { Search, Plus } from "@element-plus/icons-vue";
import SearchItem from "../../components/SearchItem.vue";
import TableCell from "../../components/TableCell.vue";
import EditDrawer from "../../components/EditDrawer.vue";
import LogDialog from "../../components/LogDialog.vue";
import { ref, reactive } from "vue";
import useTable from "./useTable";
import useForm from "./useForm";
import { useRoute } from "vue-router";
import { useRoleStore } from "../../store/role.js";

const path = useRoute().path;
const permissions = useRoleStore().permissions;
const permission = permissions[path] || {};
console.log('permission', permission)

const logVisible = ref(false);
// 查询条件
let filters = reactive({
    dealStatus: "",
    pageNo: 1,
    pageSize: 10,
});

// 列表数据
const { tableData, loading, totalCount, query } = useTable(filters);

// 表单
const { dialogVisible, formRef, isEdit, form, handleEdit, handleConfirm } =
    useForm(query);

const rules = reactive({
    acceptDeptId: [
        { required: true, message: "请选择受理部门", trigger: "blur" },
    ],
    reply: [
        { required: true, message: "请输入回复内容", trigger: "blur" },
        { min: 1, max: 500, message: "长度不超过500个字", trigger: "blur" },
    ],
});
</script>

<template>
    <div>
        <el-card class="search-wrapper common-card">
            <el-row :gutter="24">
                <SearchItem label="处理状态">
                    <el-select style="width: 100%" v-model="filters.dealStatus">
                        <el-option label="全部" value></el-option>
                        <el-option label="未处理" value="0"></el-option>
                        <el-option label="处理中" value="1"></el-option>
                        <el-option label="已处理" value="2"></el-option>
                    </el-select>
                </SearchItem>
            </el-row>
            <div class="search-button-wrapper">
                <el-button type="primary" :icon="Search" auto-insert-space @click="query">查询</el-button>
            </div>
        </el-card>

        <!-- Table -->
        <el-card class="common-card" style="width: 100%">
            <!-- 列表 -->
            <el-table v-loading="loading" :data="tableData" stripe>
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column prop="complaintName" label="投诉人" />
                <el-table-column prop="complaintPhone" label="投诉人电话" />
                <el-table-column prop="complaintAddress" label="投诉人地址" />
                <el-table-column prop="beComplaintName" label="被投诉人" />
                <el-table-column prop="beComplaintPhone" label="被投诉人电话" />
                <el-table-column prop="beComplaintAddress" label="被投诉人地址" />
                <el-table-column prop="content" label="内容" />
                <el-table-column prop="fileList" label="附件" width="100">
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.fileList">
                            <el-link type="primary" :href="item.url" target="_black">附件{{index+1}}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="dealStatusName" label="状态" width="100">
                    <template #default="scope">
                        <span :class="{
                            color_warning: scope.row.dealStatus === 0,
                            color_primary: scope.row.dealStatus === 1,
                            color_success: scope.row.dealStatus === 2,
                        }">{{ scope.row.dealStatusName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" width="200" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <!-- 编辑 -->
                        <el-button v-if="permission['更改状态']" type="text" @click="() => handleEdit(scope.row)">更改状态</el-button>
                    </template>
                </el-table-column>

                <template #empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <!-- 分页 -->
            <el-pagination style="margin-top: 20px; justify-content: flex-end" background layout="total, sizes, prev, pager, next" :total="totalCount" :default-current-page="1" v-model:current-page="filters.pageNo" v-model:page-size="filters.pageSize"></el-pagination>
            <div v-if="permission['操作日志']" style="text-align: center; margin-top: 10px">
                <el-button type="primary" link @click="logVisible = true">查看操作日志</el-button>
            </div>
        </el-card>

        <EditDrawer title="处理投诉" :visible="dialogVisible" @update:visible="dialogVisible = $event" @confirm="handleConfirm">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="处理状态" prop="dealStatus">
                    <el-select style="width: 400px" v-model="form.dealStatus" placeholder="请选择状态">
                        <el-option label="未处理" :value="0"></el-option>
                        <el-option label="处理中" :value="1"></el-option>
                        <el-option label="已处理" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </EditDrawer>

        <LogDialog :visible="logVisible" :path="path" @update:visible="logVisible = $event"></LogDialog>
    </div>
</template>

<style lang="less" scoped>
@import url("../../assets/less/common.less");
@import url("../../assets/less/search.less");

.form-item {
    font-size: 14px;
    line-height: 20px;
    color: @color_regular-text;
    margin-bottom: 20px;
    display: flex;
    .form-item-label {
        flex: none;
        width: 100px;
        text-align: right;
        padding-right: 12px;
        box-sizing: border-box;
    }
    .form-item-value {
        flex: none;
        width: 400px;
        padding-right: 20px;
        color: @color_primary-text;
    }
}
</style>